<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .demo {
    background-color: orange;
  }
</style>

<body>
  <button id="btn">点我创建一个输入框</button>
</body>
<script>
  const btn = document.getElementById("btn");

  btn.onclick = function() {
    const input = document.createElement("input");

    input.className = "demo";
    input.value = 99;
    input.onclick = function() {
      alert(1)
    }

    // 执行时机不对
    // input.parentElement.style.backgroundColor = "skyBlue"
    // console.log(input.parentElement);

    document.body.appendChild(input);

    input.focus()
    input.parentElement.style.backgroundColor = "skyBlue"
  }
</script>
</html>